<template>
  <div class="employees-detail-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="登录账号设置">
            <!-- 放置表单 -->
            <!-- el-form: :model :rules-->
            <!-- el-form-item: prop-->
            <!-- el-input: v-model-->
            <el-form
              ref="userForm"
              :model="userInfo"
              :rules="rules"
              label-width="120px"
              style="margin-left: 120px; margin-top: 30px"
            >
              <el-form-item label="姓名:" prop="username">
                <el-input v-model="userInfo.username" style="width: 300px" />
              </el-form-item>
              <el-form-item label="密码:" prop="newPassword">
                <el-input
                  v-model="userInfo.newPassword"
                  style="width: 300px"
                  type="password"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="editUserInfo">更新</el-button>
              </el-form-item>
              <el-form-item>
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemovePicture"
                  :file-list="fileList"
                  :show-file-list="false"
                  :http-request="uploadVideo"
                >
                  <el-progress
                    v-if="isUploading"
                    type="circle"
                    class="avatar-uploader-icon"
                    :percentage="percentage"
                  />
                  <template v-else>
                    <video
                      v-if="fileList.length"
                      :src="fileList[0].url"
                      class="avatar"
                      controls
                      @click.stop
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </template>
                </el-upload>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情">
            <el-tooltip class="tooltip-box" content="打印基本个人信息">
              <router-link :to="`/employees/print/${userId}?type=personal`">
                <i class="el-icon-printer" />
              </router-link>
            </el-tooltip>
            <!-- 内容 -->
            <userInfo />
          </el-tab-pane>
          <el-tab-pane label="岗位信息">
            <el-tooltip class="tooltip-box" content="打印基本岗位信息">
              <router-link :to="`/employees/print/${userId}?type=job`">
                <i class="el-icon-printer" />
              </router-link>
            </el-tooltip>
            <!-- 内容 -->
            <jobInfo />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserInfoApi } from '@/api/user'
import { editEmployeeInfoApi } from '@/api/empolyees'
import userInfo from './components/user-info.vue'
import jobInfo from './components/job-info.vue'
import cos from '@/utils/cos'
export default {
  name: 'EmployeesDetail',
  components: {
    userInfo,
    jobInfo
  },
  data() {
    return {
      userInfo: {},
      fileList: [],
      isUploading: false,
      percentage: 0,
      rules: {
        username: [
          { required: true, message: '用户名不可为空', trigger: 'blur' }
        ],
        newPassword: [
          { min: 6, max: 16, message: '用户的密码长度为6-16', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    userId() {
      return this.$route.params.id
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    handlePictureCardPreview() {},
    handleRemovePicture() {},
    uploadVideo(fileObj) {
      console.log(fileObj)
      const that = this
      that.isUploading = true
      const { file } = fileObj
      cos.sliceUploadFile(
        {
          Bucket: 'hrsass-150-1300011331' /* 填入您自己的存储桶，必须字段 */,
          Region: 'ap-beijing' /* 存储桶所在地域，例如ap-beijing，必须字段 */,
          Key:
            +new Date() +
            file.name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
          Body: file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */,
          onTaskReady: function(taskId) {
            /* 非必须 */
            console.log(taskId)
          },
          onHashProgress: function(progressData) {
            /* 非必须 */
            console.log(JSON.stringify(progressData))
          },
          onProgress: function(progressData) {
            /* 非必须 */
            console.log(JSON.stringify(progressData))
            that.percentage = progressData.percent * 100
          }
        },
        function(err, data) {
          console.log(err || data)
          that.fileList.push({ url: 'https://' + data.Location })
          that.isUploading = false
        }
      )
    },
    /**
     * 获取用户恓
     */
    async getUserInfo() {
      const { data } = await getUserInfoApi(this.userId)
      // this.userInfo.id = data.id
      // this.userInfo.username = data.username
      this.userInfo = data
    },
    /**
     * 修改用户信息
     */
    editUserInfo() {
      this.$refs.userForm.validate(async(flag) => {
        if (!flag) return
        await editEmployeeInfoApi({
          ...this.userInfo,
          password: this.userInfo.newPassword
        })
        this.$message.success('恭喜！修改成功')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.employees-detail-container {
  .el-tab-pane {
    padding-top: 10px;
  }
  .tooltip-box {
    position: absolute;
    right: 30px;
    top: 10px;
    z-index: 999;
  }
  ::v-deep {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>
